<template>
  <el-dialog :title="isEdit ? '编辑客户端' : '新增客户端'" :visible.sync="dialogVisible" :width="isEdit ? '600px' : '70%'" :close-on-click-modal="false" :before-close="close">
    <el-form ref="RefForm" :model="formData" status-icon>
      <div class="divForm">
        <el-row>
          <el-col v-if="!isEdit" :span="12">
            <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" :check-strictly="true" :default-checked-keys="arr" default-expand-all :props="defaultProps" @check-change="treeChange" />
          </el-col>
          <el-col v :span="isEdit ? 24 : 12">
            <el-form-item label="客户端名称">
              <el-input v-model="formData.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <!-- <el-button type="primary" style="float: right;" @click="close">取消</el-button> -->

          <el-button type="primary" :loading="saveLoading" style="float: right; margin-right: 20px" @click="sure">确定</el-button>
          <span v-if="!isEdit" style="color: red; float: right; margin-right: 20px"> 首次创建过程较长（1-3分钟）请耐心等待</span>
        </el-form-item>
      </div></el-form>
  </el-dialog>
</template>

<script>
// import dialogEditMixin from '@/mixins/dialogEdit'
// import listMixin from '@/mixins/list'
import { MenuAll } from '@/api/Menu'
import { tenantAddEdit } from '@/api/Tenant'
export default {
  // mixins: [dialogEditMixin, listMixin],
  data() {
    return {
      saveLoading: false,
      defaultKey: 1,
      dialogVisible: false,
      formData: {
        name: ''
      },
      id: null,
      isEdit: false,
      arr: [],
      treeData: [],
      defaultProps: {
        children: 'childMenus',
        label: 'name',
        disabled: (d, n) => {
          return d.tenants.length > 0
        }
      }
    }
  },
  methods: {
    close() {
      // 关闭模态窗
      this.dialogVisible = false
      this.formData = {
        name: ''
      }
      if (!this.isEdit) {
        this.$refs.tree.setCheckedKeys([])
      }

      this.isEdit = false
      this.id = null
    },
    treeChange(data, checked, indeterminate) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.id])
        this.setName(this.treeData, data.tenantCode, '')
      }
    },
    // 得到客户端名称
    setName(value, code, name) {
      value.forEach((item) => {
        if (item.tenantCode === code) {
          this.formData.name = name ? name + '-' + item.name : item.name
        } else if (item.childMenus && item.childMenus.length > 0) {
          const newName = name ? name + '-' + item.name : item.name
          this.setName(item.childMenus, code, newName)
        }
      })
    },
    async sure() {
      this.saveLoading = true
      var tenantCode = ''
      if (this.isEdit) {
        tenantCode = this.formData.tenantCode
      } else {
        tenantCode = this.$refs.tree.getCheckedNodes()[0].tenantCode
      }
      let obj = {}
      let method = ''
      if (this.isEdit) {
        method = 'PUT'
        obj = {
          id: this.id,
          value: {
            tenantName: this.formData.name,
            code: tenantCode
          }
        }
      } else {
        method = 'POST'
        obj = {
          tenantName: this.formData.name,
          code: tenantCode
        }
      }
      try {
        const { data } = await tenantAddEdit(method, obj)
        if (data.success) {
          this.$message.success('保存成功')
          this.close()
          this.$emit('getList')
        }
      } catch (err) {
        console.info('data', err)
        this.$message.error('保存失败')
      }
      this.saveLoading = false
    },
    open(value) {
      console.info('open', value)
      this.isEdit = false
      this.id = 0
      this.dialogVisible = true
      this.formData.name = ''
      if (value !== undefined) {
        this.isEdit = true
        this.id = value.id
        this.formData.name = value.tenantName
        this.formData.tenantCode = value.code
        return
      }
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])
        if (this.isEdit) {
          this.setData(this.treeData, value.code)
        }
      })
    },
    // 处理隧道树
    setData(value, key) {
      value.forEach((item) => {
        if (item.tenantCode === key) {
          // const checkedNodes = this.$refs.tree.getCheckedNodes()
          this.$refs.tree.setCheckedKeys([item.id])
        } else if (item.childMenus && item.childMenus.length > 0) {
          this.setData(item.childMenus, key)
        }
      })
      return value
    },
    resetFormData() {
      this.formData = {
        name: ''
      }
    },
    tabClick(tab) {
      console.log(tab)
    },
    // 获取隧道树
    async getMenuList() {
      const { data } = await MenuAll({ pageIndex: 1, pageSize: 10, menuId: 1 })
      this.treeData = []
      this.defaultKey = []
      this.treeData = this.getData(data)
      this.defaultKey = this.treeData[0].id
    },
    // 处理隧道树
    getData(value) {
      value.forEach((item) => {
        if (item.childMenus && item.childMenus.length > 0) {
          this.getData(item.childMenus)
        }
      })
      return value
    }
  }
}
</script>

<style lang='scss' scoped>
  ::v-deep .el-card__body {
    width: 500px;
    margin: 0 auto;
  }
  .limitTime {
    width: 100px;
    margin: 0 10px;
  }
</style>
